<template>
	<div class="city-list">
		<div v-for="(item,index) in arealist" :key='item.id'>
			<div class="list-title" @click="typeShow(item.name,item.id)">
				<span> {{item.name}}</span>
			</div>

		</div>

		<template v-for="(item,index) in arealist">
			<ol class="list-item" v-if="item.id==msg">
				<li v-for="(item,index) in item.province_list">
					{{item.city_name}}
				</li>
			</ol>
		</template>

	</div>
</template>

<script>
	export default {
		props: ['arealist'],
		data() {
			return {
				msg: 1
			}
		},
		methods: {
			typeShow(val, id) {
				if (val == '推荐') {
					this.msg = 1	
				}else if(val == '亚洲'){
					this.msg = 2
				}else if (val == '欧美') {
					this.msg = 3	
				}else if (val == '其他') {
					this.msg = 4	
				}		
			}
		},
		
	}
</script>

<style scoped>
	.city-list {
		width: 100%;
		font-size: 0.28rem;
	}

	.list-title {
		padding: 0.25rem 0.657rem;
		float: left;
		background-color: white;
		border-bottom: 1px #CCCCCC solid;
	}

	.list-title span:hover {
		color: #10B472;
		border-bottom: 1px #10B472 solid;
	}

	.list-item {
		padding-top: 0.3rem;
		background-color: white;
		color: #212121;
		position: relative;
		overflow: hidden;
		width: 100%;
	}

	.list-item:before {
		content: "";
		position: absolute;
		width: 25%;
		height: 100%;
		left: 25%;
		/* 左边的作用，是将覆盖在*/
		border-radius: 0.25rem;

	}

	.list-item:after {
		content: "";
		position: absolute;
		width: 25%;
		height: 100%;
		right: 25%;
		border-radius: 0.3rem;
	}

	.list-item li {
		width: 20.6%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border: 1px solid #ddd;
		border-radius: 0.15rem;
		margin: 0.13rem;

	}
</style>
